<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 编码格式 -->
        <meta charset="UTF-8">
        <title></title>
        <!-- 作者 -->
        <meta name="author" content="author">
        <!-- 网页描述 -->
        <meta name="description" content="hello">
        <!-- 关键字使用","分隔 -->
        <meta name="keywords" content="a,b,c">
        <!-- 禁止浏览器从本地机的缓存中调阅页面内容 -->
        <meta http-equiv="Pragma" content="no-cache">
        <!-- 用来防止别人在框架里调用你的页面 -->
        <meta http-equiv="Window-target" content="_top">
        <!-- content的参数有all，none，index，noindex，follow，nofollow，默认是all -->
        <meta name="robots" content="none">
        <!-- 收藏图标 -->
        <link rel="Shortcut Icon" href="favicon.ico">
        <!-- 网页不会被缓存 -->
        <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
        <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!-- 页面按原比例显示 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--[if lte IE 8]>
        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
        <![endif]-->
        <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
        <!--<![endif]-->

        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">

        <link rel="stylesheet" href="backup/css/styles.css" />

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

        <script>
            $(document).ready(function(){
                $('.bxslider').bxSlider();
            });
        </script>
        <style>
            .grids-example {
                border-top: 0;
            }
            .grids-example {
                background: rgb(250, 250, 250);
                margin: 2em auto;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
            }
            .grids-example [class *= "pure-u"] {
                font-family: Consolas, 'Liberation Mono', Courier, monospace;
                text-align: center;
                padding: 1em 0;
                border: 1px solid #ddd;
                border-right: none;
                border-bottom: none;
            }
        </style>
    </head>

    <body>
        <div class="pure-g">
            <div class="pure-u-1-3"><p>Thirds</p></div>
            <div class="pure-u-1-3"><p>Thirds</p></div>
            <div class="pure-u-1-3"><p>Thirds</p></div>
        </div>

        <div class="grids-example">
            <div class="pure-g">
                <div class="pure-u-1">.pure-u-1</div>
                <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
                    .pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4
                </div>
                <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
                    .pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4
                </div>
                <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
                    .pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4
                </div>
                <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
                    .pure-u-1<br>.pure-u-md-1-2<br>.pure-u-lg-1-4
                </div>
                <div class="pure-u-1 pure-u-md-3-4">.pure-u-1<br>.pure-u-md-3-4</div>
                <div class="pure-u-1 pure-u-md-1-4">.pure-u-1<br>.pure-u-md-1-4</div>
            </div>
        </div>
    </body>
</html>